import {defineComponent,computed} from 'vue';

import './md-plus.scss';
import {MD} from './markdown';
import {processMdc} from './process/processMdc';
import {isMdcTable} from "./process/processTableString";
import {MdcTableComponent} from './mdc-table';
import {MdcCaseComponent} from './mdc-case';
export {MD} from './markdown';


export const MDPLUS = defineComponent({
  props: {
    content: {type: String, required: true},
  },
  setup(props) {
    const mdcBlocks = computed(() => processMdc(props.content))
    return () => (
      <div class="md-plus">
        {mdcBlocks.value.map(block => typeof block === "string" ? (
          <div class="md-plus__card">
            <MD content={block}/>
          </div>
        ) : (
          (isMdcTable(block)) ? (
            <div class="md-plus__card">
              <MdcTableComponent content={block}/>
            </div>
          ) : (
            <div class="md-plus__card">
              <MdcCaseComponent content={block}/>
            </div>
          )
        ))}
      </div>
    )
  },
})
